import { globalStyle, style } from '@vanilla-extract/css';
import { vars, Z_INDEX } from '../../theme/vars.css';

export const toastStyle = style({
	position: 'fixed',
	left: '50vw',
	bottom: '20vh',
	width: '1px',
	height: '1px',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	opacity: '0',
	pointerEvents: 'none',
	transition: 'opacity 0.5s',
	zIndex: Z_INDEX.TOAST,
	selectors: {
		'&.active': {
			opacity: '1',
		},
	},
});

globalStyle(`${toastStyle}>div`, {
	lineBreak: 'anywhere',
	position: 'absolute',
	maxWidth: 'min(60vw, 500px)',
	textAlign: 'center',
	borderRadius: '2rem',
	backgroundColor: vars.color.toastBackground,
	padding: '1rem 2rem',
	width: 'max-content',
	boxShadow: `1px 1px 8px ${vars.color.shadow}`,
	fontSize: '0.9rem',
	color: vars.color.buttonText,
	cursor: 'default',
});
